<template>
  <div class="common-layout">
    <my-header></my-header>
    <my-menu ref="myMenu"></my-menu>
    <my-search></my-search>
    <div class="common-layout">
      <div class="table">
        <el-table
          :cell-style="rowClass"
          :data="tableData"
          :header-cell-style="headClass"
          style="width: 100%;">
          <el-table-column
            fixed
            height="48"
            label="序号"
            width="70">
            <template slot-scope="scope">
              <div class="l-xh">{{ scope.row.id }}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="标题"
            prop="title"
            width="474">
            <template slot-scope="scope">
              <a class="el-button--text" href="#detail" target="_blank">
                {{ scope.row.title }}
              </a>
            </template>
          </el-table-column>
          <el-table-column
            label="制定机关"
            prop="pubOrg"
            width="248">
          </el-table-column>
          <el-table-column
            label="法律性质"
            prop="type"
            width="113">
          </el-table-column>
          <el-table-column
            label="时效性"
            prop="timeliness"
            width="113">
          </el-table-column>
          <el-table-column
            :sortable="true"
            label="公布日期"
            prop="pubDate"
            width="142">
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          :current-page="currentPage4"
          :page-size="100"
          :total="400"
          layout="total, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>
<script>
import myMenu from '../components/menu'
import myHeader from '../components/header'
import myFooter from '../components/footer'
import mySearch from '../components/search'

export default {
  data () {
    return {
      currentPage4: 4,
      tableData: [{
        id: '1',
        title: '中华人民共和国宪法（1982年）',
        pubOrg: '珠海市人民代表大会常务委员会',
        type: '地方性法规',
        timeliness: '有效',
        pubDate: '[2021-02-07]'
      }, {
        id: '2',
        title: '临沂市城镇容貌和环境卫生管理条例',
        pubOrg: '临沂市人民代表大会常务委员会',
        type: '地方性法规',
        timeliness: '尚未生效',
        pubDate: '[2021-02-07]'
      }, {
        id: '3',
        title: '江苏南通狼山国家森林公园管理条例',
        pubOrg: '临沂市人民代表大会常务委员会',
        type: '地方性法规',
        timeliness: '尚未生效',
        pubDate: '[2021-02-02]'
      }, {
        id: '4',
        title: '聊城市物业管理条例',
        pubOrg: '临沂市人民代表大会常务委员会',
        type: '地方性法规',
        timeliness: '尚未生效',
        pubDate: '[2021-02-02]'
      }, {
        id: '5',
        title: '潍坊市供热条例',
        pubOrg: '临沂市人民代表大会常务委员会',
        type: '地方性法规',
        timeliness: '尚未生效',
        pubDate: '[2021-01-29]'
      }, {
        id: '6',
        title: '凉山彝族自治州森林草原防灭火条例',
        pubOrg: '临沂市人民代表大会常务委员会',
        type: '地方性法规',
        timeliness: '尚未生效',
        pubDate: '[2021-01-29]'
      }, {
        id: '7',
        title: '浙江省人民代表大会议事规则',
        pubOrg: '临沂市人民代表大会常务委员会',
        type: '地方性法规',
        timeliness: '尚未生效',
        pubDate: '[2021-01-29]'
      }, {
        id: '8',
        title: '湖北省合同监督条例',
        pubOrg: '临沂市人民代表大会常务委员会',
        type: '地方性法规',
        timeliness: '尚未生效',
        pubDate: '[2021-01-28]'
      }, {
        id: '9',
        title: '丽水市烟花爆竹经营燃放管理规定',
        pubOrg: '临沂市人民代表大会常务委员会',
        type: '上海',
        timeliness: '尚未生效',
        pubDate: '[2021-01-28]'
      }]
    }
  },
  components: {
    myMenu,
    myHeader,
    myFooter,
    mySearch
  },
  methods: {
    // 表格样式
    rowClass () {
      return 'color: #141414;font-size: 16px; padding: 0; width: 10px; height: 49px;'
    },
    // 表头样式
    headClass () {
      return 'color:#141414;font-size:16px;font-weight: bold;text-align: center; padding: 0;text-align: left;height: 48px;'
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    initNav () {
      this.$refs.myMenu.changeNav(this.$route.query.name)
    }
  },
  mounted: function () {
    this.initNav()
  },
  watch: {
    $route () {
      this.initNav()
    }
  }

}
</script>
<style scoped>
.block {
  text-align: center;
}

.table {
  width: 1200px;
  margin: 20px auto;
  border-bottom: 1px solid #c8c8c8;
}

.el-table a {
  text-decoration: none;
  color: #141414;
}

.l-xh {
  color: #fff;
  min-width: 27px;
  padding: 0 10px;
  display: inline-block;
  line-height: 24px;
  background: #7f0606;
  font-family: "宋体";
}
</style>
